<template>
	<el-row style="margin-top: 15px;">
   <el-row>
     <el-col :span="12" :offset="6">
      <el-upload ref="upload" action="/api/hdfs/put" :multiple="false" :limit="1" :file-list="fileList" :auto-upload="false" name="file" :data="hdfs" :on-success="onSuccess" :on-error="onError">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>
     </el-col>
   </el-row>
   <el-row style="margin-top: 10px;">
     <el-col :span="12" :offset="6">
      <el-form ref="form" label-width="80px">
        <el-form-item label="hdfs路径">
          <el-col :span="15">
            <el-input v-model="hdfs.hdfsPath"></el-input>
          </el-col>
          <el-col :span="9">
            <el-button style="margin-left: 10px;" size="small" type="primary" @click="hdfsLs" :loading="lsLoad">查看</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :loading="uploadLoad">上传</el-button>
            <el-button style="margin-left: 10px;" size="small" type="danger" @click="hdfsDel" :loading="deleteLoad">删除</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-col>
   </el-row>
   <el-row>
    <el-col :span="20" :offset="2">
      <log-tabs :height="areaHeight" :tabs="tabs" :active.sync="active"></log-tabs>
    </el-col>
   </el-row>
  </el-row>
</template>
<script type="text/javascript">
  import logTabs from './log-tabs'
  export default {
    props: ['winP'],
    data () {
      return {
        fileList: [],
        hdfs: {
          hdfsPath: '/'
        },
        lsLoad: false,
        uploadLoad: false,
        deleteLoad: false,
        tabs: {},
        active: ''
      }
    },
    computed: {
      areaHeight () {
        return Math.floor((this.winP.height - 335) / 21)
      }
    },
    methods: {
      async hdfsLs () {
        let result = await this.$api.call({
          service: 'hdfs/ls',
          body: {
            path: this.hdfs.hdfsPath
          },
          load: {
            context: this,
            name: 'lsLoad'
          }
        })
        let out = `------------begin ${new Date().format('yyyy-MM-dd HH:mm:ss')} ------------------
${result.stderr}
${result.stdout}
================ end ${new Date().format('yyyy-MM-dd HH:mm:ss')} ================`
        this.$set(this.tabs, 'hdfs', out)
        this.active = 'hdfs'
      },
      async hdfsDel () {
        let result = await this.$api.call({
          service: 'hdfs/del',
          body: {
            path: this.hdfs.hdfsPath
          },
          load: {
            context: this,
            name: 'deleteLoad'
          }
        })
        let out = `------------begin ${new Date().format('yyyy-MM-dd HH:mm:ss')} ------------------
${result.stderr}
${result.stdout}
================ end ${new Date().format('yyyy-MM-dd HH:mm:ss')} ================`
        this.$set(this.tabs, 'delete', out)
        this.active = 'delete'
        let lastIndex = this.hdfs.hdfsPath.lastIndexOf('/')
        console.log(`把文件名 ${this.hdfs.hdfsPath.substring(lastIndex)} 从路径中删除`)
        this.hdfs.hdfsPath = this.hdfs.hdfsPath.substr(0, lastIndex)
        await this.hdfsLs()
      },
      submitUpload() {
        this.uploadLoad = true;
        this.$refs.upload.submit();

      },
      onSuccess (response, file, fileList) {
        let logs = {}
        for (let i in response.body) {
          let v = response.body[i]
          if (typeof v === 'object') {
            logs[i] = JSON.stringify(v, null, 2)
          } else {
            logs[i] = v
          }
          this.active = i
        }
        this.uploadLoad = false
        this.$set(this, 'tabs', logs)
        this.$refs.upload.clearFiles();
        this.hdfsLs()   //查询
      },
      onError (err, file, fileList) {
        this.$set(this.tabs, 'upload-error', JSON.stringify(err, null, 2))
        this.active = 'update-error'
        this.uploadLoad = false
      }
    },
    components: {
      logTabs
    }
  }
</script>